<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>Boo Admin - DataTable</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/lib/bootstrap.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/extension.css" rel="stylesheet">
<link href="assets/css/boo.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/boo-coloring.css" rel="stylesheet">
<link href="assets/css/boo-utility.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="assets/plugins/selectivizr/selectivizr-min.js"></script>
    <script src="assets/plugins/flot/excanvas.min.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.html">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.html">
</head>

<body class="sidebar-left panel-side">
<div class="page-container">
    <div id="header-container">
        <div id="header">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="brand" href="javascript:void(0);"><img src="assets/img/demo/logo-brand.png"></a>
                        <div class="search-global">
                            <input id="globalSearch" class="search search-query input-medium" type="search">
                            <a class="search-button" href="javascript:void(0);"><i class="fontello-icon-search-5"></i></a> </div>
                        <div class="nav-collapse collapse">
                            <ul class="nav user-menu visible-desktop">
                                <li><a class="btn-glyph fontello-icon-edit tip-bc" href="javascript:void(0);" title="Messages"><span class="badge badge-important">8</span></a></li>
                                <li><a class="btn-glyph fontello-icon-mail-1 tip-bc" href="javascript:void(0);" title="Emails"></a></li>
                                <li><a class="btn-glyph fontello-icon-lifebuoy tip-bc" href="javascript:void(0);" title="Support"><span class="badge badge-important">4</span></a></li>
                            </ul>
                            <ul class="nav">
                                <li> <a href="dashboard-one.html">Dashboard</a> </li>
                                <li class="active"> <a href="javascript:void(0);">Components</a> </li>
                                <li> <a href="component-fullcalendar-demo.html"><span class="fontello-icon-calendar"></span>Calendar</a> </li>
                                <li> <a href="javascript:void(0);"><span class="fontello-icon-users"></span>Contacts</a> </li>
                                <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><span class="fontello-icon-list-1"></span>Customize <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="component-form-demo.html">Demo Form</a></li>
                                        <li><a href="component-widgets-remember.html">Remember</a></li>
                                        <li><a href="component-widgets-users.html">User List</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Next Update</li>
                                        <li><a href="javascript:void(0);">Contacts</a></li>
                                        <li><a href="javascript:void(0);">Email</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- // navbar -->
            
            <div class="header-drawer">
                <div class="mobile-nav text-center visible-phone"> <a href="javascript:void(0);" class="mobile-btn" data-toggle="collapse" data-target=".sidebar"><i class="aweso-icon-chevron-down"></i> Components</a> </div>
                <!-- // Resposive navigation -->
                <div class="breadcrumbs-nav hidden-phone">
                    <ul id="breadcrumbs" class="breadcrumb">
                        <li><a href="javascript:void(0);"><i class="fontello-icon-home f12"></i> Dashboard</a> <span class="divider">/</span></li>
                        <li class="dropdown"><a href="javascript:void(0);">Table </a> <span class="divider">/</span>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Table</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                            </ul>
                        </li>
                        <li class="active">Boo Admin </li>
                    </ul>
                </div>
                <!-- // breadcrumbs --> 
            </div>
            <!-- // drawer --> 
        </div>
    </div>
    <!-- // header-container -->
    
    <div id="main-container">
        <div id="main-sidebar" class="sidebar sidebar-inverse">
            <div class="sidebar-item">
                <div class="media profile">
                    <div class="media-thumb media-left thumb-bordereb"> <a class="img-shadow" href="javascript:void(0);"><img class="thumb" src="assets/img/demo/demo-avatar9604.jpg"></a> </div>
                    <div class="media-body">
                        <h5 class="media-heading">Twitter Bootstrap <small>as Administrator</small></h5>
                        <p class="data">Last Access: 16 May 15:30</p>
                    </div>
                </div>
            </div>
            <!-- // sidebar item - profile -->
            
            <ul id="mainSideMenu" class="nav nav-list nav-side">
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-monitor"></span> <i class="chevron fontello-icon-right-open-3"></i> Dashboards </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accDash">
                        <li> <a href="dashboard-one.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 1 </a> </li>
                        <li> <a href="dashboard-two.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 2 </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Dashboard -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon aweso-icon-list-alt"></span><i class="chevron fontello-icon-right-open-3"></i> Form </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accForms">
                        <li> <a href="component-form-demo.html"> <i class="fontello-icon-right-dir"></i> Demo Form </a> </li>
                        <li> <a href="component-form-element.html"> <i class="fontello-icon-right-dir"></i> Form Element </a> </li>
                        <li> <a href="component-form-extension.html"> <i class="fontello-icon-right-dir"></i> Form Extension</a> </li>
                        <li> <a href="component-form-wizard.html"> <i class="fontello-icon-right-dir"></i> Form Wizard</a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Forms -->
                <li class="accordion-group">
                    <div class="accordion-heading active"> <a href="#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-align-justify"></span> <i class="chevron fontello-icon-right-open-3"></i> Tables </a> </div>
                    <ul class="accordion-content nav nav-list collapse in" id="accTables">
                        <li> <a href="component-table.html"> <i class="fontello-icon-right-dir"></i> Base Table </a> </li>
                        <li> <a href="component-table-boo.html"> <i class="fontello-icon-right-dir"></i> Boo Table </a> </li>
                        <li class="active"> <a href="component-table-datatable.html"> <i class="fontello-icon-right-dir"></i> DataTable </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Tables -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-chart"></span> <i class="chevron fontello-icon-right-open-3"></i> Statistics </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accStatistics">
                        <li> <a href="statistic-flot.html"> <i class="fontello-icon-right-dir"></i> Charts </a> </li>
                        <li> <a href="statistic-sparkline.html"> <i class="fontello-icon-right-dir"></i> Sparklines </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Statistics -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon  fontello-icon-window"></span> <i class="chevron fontello-icon-right-open-3"></i> Widgets </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accWidgets">
                        <li> <a href="component-widget-style.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Style </a> </li>
                        <li> <a href="component-widget-custom.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Custom </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Widgets -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-puzzle"></span> <i class="chevron fontello-icon-right-open-3"></i> UI Elements </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accButtons">
                        <li> <a href="elements-button.html"> <i class="fontello-icon-right-dir"></i> Button </a> </li>
                        <li> <a href="elements-icon-font.html"> <i class="fontello-icon-right-dir"></i> Iconic fonts </a> </li>
                        <li> <a href="elements-icon-fugue-demo.html"> <i class="fontello-icon-right-dir"></i> Icon </a> </li>
                        <li> <a href="elements-wells.html"> <i class="fontello-icon-right-dir"></i> Wells </a> </li>
                        <li> <a href="elements-tabs.html"> <i class="fontello-icon-right-dir"></i> Tabs </a> </li>
                        <li> <a href="elements-modals.html"> <i class="fontello-icon-right-dir"></i> Modal </a> </li>
                        <li> <a href="elements-progressbar.html"> <i class="fontello-icon-right-dir"></i> Progressbar </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu UI Elements -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accCalendar" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-calendar"></span> <i class="chevron fontello-icon-right-open-3"></i> Calendar </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accCalendar">
                        <li> <a href="component-fullcalendar-demo.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Demo </a> </li>
                        <li> <a href="component-fullcalendar.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Style </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Calendar -->
            </ul>
            <!-- // sidebar menu -->
            
            <div class="sidebar-item"></div>
            <!-- // sidebar item --> 
            
        </div>
        <!-- // sidebar -->
        
        <div id="main-content" class="main-content container-fluid">
            <div class="row-fluid page-head">
                <h2 class="page-title"><i class="aweso-icon-table"></i> DataTable <small>perfect table</small></h2>
                <p class="pagedesc">jQuery DataTable + Bootstrap + Boo = a powerful combination to display your data </p>
                <div class="page-bar">
                    <div class="btn-toolbar"> </div>
                </div>
            </div>
            <!-- // page head -->
            
            <div id="page-content" class="page-content">
                <section>
                    <div class="page-header">
                        <h3><i class="fontello-icon-th-1 opaci35"></i> Base Datatable <small>.boo-table</small></h3>
                        <p>apply class <code>.boo-table</code> along with styles bootstrap and use te the great DataTable </p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <table id="exampleDT" class="table table-striped table-hover">
                                <caption>
                                Default Table Caption - Title for table <span>Here text in span</span>
                                </caption>
                                <thead>
                                    <tr>
                                        <th scope="col">ID <span class="column-sorter"></span></th>
                                        <th scope="col">Name <span class="column-sorter"></span></th>
                                        <th scope="col">City <span class="column-sorter"></span></th>
                                        <th scope="col">Email <span class="column-sorter"></span></th>
                                        <th scope="col">Date of birth <span class="column-sorter"></span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td>Long Beach</td>
                                        <td>semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td>Lockport</td>
                                        <td>commodo@Curabiturconsequatlectus.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td>Bentonville</td>
                                        <td>nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td>Troy</td>
                                        <td>Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Marvin Bell</td>
                                        <td>Cody</td>
                                        <td>aliquet@Craspellentesque.com</td>
                                        <td>10/17/1979</td>
                                    </tr>
                                    <tr>
                                        <td>6</td>
                                        <td>Lucas Melendez</td>
                                        <td>Plano</td>
                                        <td>Maecenas.malesuada@Duismi.org</td>
                                        <td>02/25/1967</td>
                                    </tr>
                                    <tr>
                                        <td>7</td>
                                        <td>Devin Harris</td>
                                        <td>Altoona</td>
                                        <td>dolor.sit@apurus.org</td>
                                        <td>01/09/1990</td>
                                    </tr>
                                    <tr>
                                        <td>8</td>
                                        <td>Tucker Graves</td>
                                        <td>Yorba Linda</td>
                                        <td>libero.nec.ligula@hendrerita.ca</td>
                                        <td>12/03/1962</td>
                                    </tr>
                                    <tr>
                                        <td>9</td>
                                        <td>Linus Carpenter</td>
                                        <td>Attleboro</td>
                                        <td>pellentesque.massa@feugiat.com</td>
                                        <td>03/06/1975</td>
                                    </tr>
                                    <tr>
                                        <td>10</td>
                                        <td>Quinlan Lindsay</td>
                                        <td>San Antonio</td>
                                        <td>rhoncus@tristique.com</td>
                                        <td>10/19/1963</td>
                                    </tr>
                                    <tr>
                                        <td>11</td>
                                        <td>Jolie Ryan</td>
                                        <td>Yonkers</td>
                                        <td>Proin@Utnec.edu</td>
                                        <td>12/17/1969</td>
                                    </tr>
                                    <tr>
                                        <td>12</td>
                                        <td>Roanna Adkins</td>
                                        <td>Wynne</td>
                                        <td>egestas@massaIntegervitae.edu</td>
                                        <td>07/20/1980</td>
                                    </tr>
                                    <tr>
                                        <td>13</td>
                                        <td>Berk Clemons</td>
                                        <td>Madison</td>
                                        <td>mus.Proin.vel@nibhQuisque.edu</td>
                                        <td>09/10/1963</td>
                                    </tr>
                                    <tr>
                                        <td>14</td>
                                        <td>Tamara Stokes</td>
                                        <td>Edmond</td>
                                        <td>nec@orci.com</td>
                                        <td>01/14/1981</td>
                                    </tr>
                                    <tr>
                                        <td>15</td>
                                        <td>Shoshana Hodges</td>
                                        <td>Reading</td>
                                        <td>nibh@molestieSedid.org</td>
                                        <td>11/12/1986</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // DATATABLE Base - DT -->
                             
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row --> 
                    
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> Wrapped in a DataTable <small>.widget-simple</small></h3>
                        <p>Wrap the table in the widget class <code> .widget-simple</code> or <code> .widget-box</code>.</p>
                        <p>Click here for change wrapper style <a id="btnChangeWrapper1" class="btn _btn-large btn-green" href="javascript:void(0);"> <i class="fontello-icon-arrows-cw"></i> Change</a></p>
                    </div>
                    <div class="row-fluid margin-bottom16">
                        <div class="span12">
                            <div class="widget widget-simple widget-table">
                                <table id="exampleDTA" class="table boo-table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th scope="col">ID <span class="column-sorter"></span></th>
                                            <th scope="col">Name <span class="column-sorter"></span></th>
                                            <th scope="col">City <span class="column-sorter"></span></th>
                                            <th scope="col">Email <span class="column-sorter"></span></th>
                                            <th scope="col">Date of birth <span class="column-sorter"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td>Long Beach</td>
                                            <td>semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td>Lockport</td>
                                            <td>commodo@Curabiturconsequatlectus.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td>Bentonville</td>
                                            <td>nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td>Troy</td>
                                            <td>Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td>Cody</td>
                                            <td>aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>Lucas Melendez</td>
                                            <td>Plano</td>
                                            <td>Maecenas.malesuada@Duismi.org</td>
                                            <td>02/25/1967</td>
                                        </tr>
                                        <tr>
                                            <td>7</td>
                                            <td>Devin Harris</td>
                                            <td>Altoona</td>
                                            <td>dolor.sit@apurus.org</td>
                                            <td>01/09/1990</td>
                                        </tr>
                                        <tr>
                                            <td>8</td>
                                            <td>Tucker Graves</td>
                                            <td>Yorba Linda</td>
                                            <td>libero.nec.ligula@hendrerita.ca</td>
                                            <td>12/03/1962</td>
                                        </tr>
                                        <tr>
                                            <td>9</td>
                                            <td>Linus Carpenter</td>
                                            <td>Attleboro</td>
                                            <td>pellentesque.massa@feugiat.com</td>
                                            <td>03/06/1975</td>
                                        </tr>
                                        <tr>
                                            <td>10</td>
                                            <td>Quinlan Lindsay</td>
                                            <td>San Antonio</td>
                                            <td>rhoncus@tristique.com</td>
                                            <td>10/19/1963</td>
                                        </tr>
                                        <tr>
                                            <td>11</td>
                                            <td>Jolie Ryan</td>
                                            <td>Yonkers</td>
                                            <td>Proin@Utnec.edu</td>
                                            <td>12/17/1969</td>
                                        </tr>
                                        <tr>
                                            <td>12</td>
                                            <td>Roanna Adkins</td>
                                            <td>Wynne</td>
                                            <td>egestas@massaIntegervitae.edu</td>
                                            <td>07/20/1980</td>
                                        </tr>
                                        <tr>
                                            <td>13</td>
                                            <td>Berk Clemons</td>
                                            <td>Madison</td>
                                            <td>mus.Proin.vel@nibhQuisque.edu</td>
                                            <td>09/10/1963</td>
                                        </tr>
                                        <tr>
                                            <td>14</td>
                                            <td>Tamara Stokes</td>
                                            <td>Edmond</td>
                                            <td>nec@orci.com</td>
                                            <td>01/14/1981</td>
                                        </tr>
                                        <tr>
                                            <td>15</td>
                                            <td>Shoshana Hodges</td>
                                            <td>Reading</td>
                                            <td>nibh@molestieSedid.org</td>
                                            <td>11/12/1986</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // DATATABLE - DTA -->
                                
                            </div>
                            <!-- // Column -->
                             
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row --> 
                    
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> Injekt Toolbar <small>.btn-toolbar</small></h3>
                        <p>base toolbar injekt in header, full pagination</p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="widget widget-simple widget-table">
                                <table id="exampleDTB-1" class="table boo-table table-striped table-content table-hover">
                                    <thead>
                                        <tr>
                                            <th scope="col">ID <span class="column-sorter"></span></th>
                                            <th scope="col">Name <span class="column-sorter"></span></th>
                                            <th scope="col">City <span class="column-sorter"></span></th>
                                            <th scope="col">Email <span class="column-sorter"></span></th>
                                            <th scope="col">Date of birth <span class="column-sorter"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td>Long Beach</td>
                                            <td>semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td>Lockport</td>
                                            <td>commodo@Curabiturconsequatlectus.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td>Bentonville</td>
                                            <td>nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td>Troy</td>
                                            <td>Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td>Cody</td>
                                            <td>aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>Lucas Melendez</td>
                                            <td>Plano</td>
                                            <td>Maecenas.malesuada@Duismi.org</td>
                                            <td>02/25/1967</td>
                                        </tr>
                                        <tr>
                                            <td>7</td>
                                            <td>Devin Harris</td>
                                            <td>Altoona</td>
                                            <td>dolor.sit@apurus.org</td>
                                            <td>01/09/1990</td>
                                        </tr>
                                        <tr>
                                            <td>8</td>
                                            <td>Tucker Graves</td>
                                            <td>Yorba Linda</td>
                                            <td>libero.nec.ligula@hendrerita.ca</td>
                                            <td>12/03/1962</td>
                                        </tr>
                                        <tr>
                                            <td>9</td>
                                            <td>Linus Carpenter</td>
                                            <td>Attleboro</td>
                                            <td>pellentesque.massa@feugiat.com</td>
                                            <td>03/06/1975</td>
                                        </tr>
                                        <tr>
                                            <td>10</td>
                                            <td>Quinlan Lindsay</td>
                                            <td>San Antonio</td>
                                            <td>rhoncus@tristique.com</td>
                                            <td>10/19/1963</td>
                                        </tr>
                                        <tr>
                                            <td>11</td>
                                            <td>Jolie Ryan</td>
                                            <td>Yonkers</td>
                                            <td>Proin@Utnec.edu</td>
                                            <td>12/17/1969</td>
                                        </tr>
                                        <tr>
                                            <td>12</td>
                                            <td>Roanna Adkins</td>
                                            <td>Wynne</td>
                                            <td>egestas@massaIntegervitae.edu</td>
                                            <td>07/20/1980</td>
                                        </tr>
                                        <tr>
                                            <td>13</td>
                                            <td>Berk Clemons</td>
                                            <td>Madison</td>
                                            <td>mus.Proin.vel@nibhQuisque.edu</td>
                                            <td>09/10/1963</td>
                                        </tr>
                                        <tr>
                                            <td>14</td>
                                            <td>Tamara Stokes</td>
                                            <td>Edmond</td>
                                            <td>nec@orci.com</td>
                                            <td>01/14/1981</td>
                                        </tr>
                                        <tr>
                                            <td>15</td>
                                            <td>Shoshana Hodges</td>
                                            <td>Reading</td>
                                            <td>nibh@molestieSedid.org</td>
                                            <td>11/12/1986</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // DATATABLE - DTB-1 -->
                                
                            </div>
                            <!-- // Widget -->
                            
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row -->
                     
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> ... add caption, table info <small>.boo-table .table-bordered</small></h3>
                        <p>base toolbar in the header, used a table caption info</p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="widget widget-simple widget-table">
                                <table id="exampleDTB-2" class="table boo-table table-striped table-content table-hover">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID <span class="column-sorter"></span></th>
                                            <th scope="col">Name <span class="column-sorter"></span></th>
                                            <th scope="col">City <span class="column-sorter"></span></th>
                                            <th scope="col">Email <span class="column-sorter"></span></th>
                                            <th scope="col">Date of birth <span class="column-sorter"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td>Long Beach</td>
                                            <td>semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td>Lockport</td>
                                            <td>commodo@Curabiturconsequatlectus.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td>Bentonville</td>
                                            <td>nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td>Troy</td>
                                            <td>Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td>Cody</td>
                                            <td>aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>Lucas Melendez</td>
                                            <td>Plano</td>
                                            <td>Maecenas.malesuada@Duismi.org</td>
                                            <td>02/25/1967</td>
                                        </tr>
                                        <tr>
                                            <td>7</td>
                                            <td>Devin Harris</td>
                                            <td>Altoona</td>
                                            <td>dolor.sit@apurus.org</td>
                                            <td>01/09/1990</td>
                                        </tr>
                                        <tr>
                                            <td>8</td>
                                            <td>Tucker Graves</td>
                                            <td>Yorba Linda</td>
                                            <td>libero.nec.ligula@hendrerita.ca</td>
                                            <td>12/03/1962</td>
                                        </tr>
                                        <tr>
                                            <td>9</td>
                                            <td>Linus Carpenter</td>
                                            <td>Attleboro</td>
                                            <td>pellentesque.massa@feugiat.com</td>
                                            <td>03/06/1975</td>
                                        </tr>
                                        <tr>
                                            <td>10</td>
                                            <td>Quinlan Lindsay</td>
                                            <td>San Antonio</td>
                                            <td>rhoncus@tristique.com</td>
                                            <td>10/19/1963</td>
                                        </tr>
                                        <tr>
                                            <td>11</td>
                                            <td>Jolie Ryan</td>
                                            <td>Yonkers</td>
                                            <td>Proin@Utnec.edu</td>
                                            <td>12/17/1969</td>
                                        </tr>
                                        <tr>
                                            <td>12</td>
                                            <td>Roanna Adkins</td>
                                            <td>Wynne</td>
                                            <td>egestas@massaIntegervitae.edu</td>
                                            <td>07/20/1980</td>
                                        </tr>
                                        <tr>
                                            <td>13</td>
                                            <td>Berk Clemons</td>
                                            <td>Madison</td>
                                            <td>mus.Proin.vel@nibhQuisque.edu</td>
                                            <td>09/10/1963</td>
                                        </tr>
                                        <tr>
                                            <td>14</td>
                                            <td>Tamara Stokes</td>
                                            <td>Edmond</td>
                                            <td>nec@orci.com</td>
                                            <td>01/14/1981</td>
                                        </tr>
                                        <tr>
                                            <td>15</td>
                                            <td>Shoshana Hodges</td>
                                            <td>Reading</td>
                                            <td>nibh@molestieSedid.org</td>
                                            <td>11/12/1986</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // BOO TABLE - DTB-2 -->
                                
                            </div>
                            <!-- // Widget -->
                             
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row -->
                    
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="opaci35 aweso-icon-table"></i> ... extra toolbar, row total <small>.boo-table bg-blue</small></h3>
                        <p>extra table tool for your event info table is placed in the header, applied to the body coloring table</p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="widget widget-simple widget-table">
                                <table id="exampleDTC" class="table table-striped table-content table-condensed boo-table table-hover bg-blue-light">
                                    <caption class="caption-m">
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col">Order ID <span class="column-sorter"></span></th>
                                            <th scope="col">Customer ID <span class="column-sorter"></span></th>
                                            <th scope="col">Employee ID <span class="column-sorter"></span></th>
                                            <th scope="col">Order Date <span class="column-sorter"></span></th>
                                            <th scope="col">Required Date <span class="column-sorter"></span></th>
                                            <th scope="col">Shipped Date <span class="column-sorter"></span></th>
                                            <th scope="col">Freight <span class="column-sorter"></span></th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr id="FootersRow0" class="total">
                                            <th>Total sum</th>
                                            <th></th>
                                            <th class="hidden-phone"></th>
                                            <th class="hidden-phone"></th>
                                            <th class="hidden-phone hidden-tablet"></th>
                                            <th></th>
                                            <th class="text-right"></th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td>10248</td>
                                            <td>VINET</td>
                                            <td>Buchanan</td>
                                            <td>04/08/2012</td>
                                            <td>01/09/2012</td>
                                            <td>16/08/2012</td>
                                            <td>32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td>10249</td>
                                            <td>TOMSP</td>
                                            <td>Suyama</td>
                                            <td>05/08/2012</td>
                                            <td>16/09/2012</td>
                                            <td>10/08/2012</td>
                                            <td>11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td>10250</td>
                                            <td>HANAR</td>
                                            <td>Peacock</td>
                                            <td>08/08/2012</td>
                                            <td>05/09/2012</td>
                                            <td>12/08/2012</td>
                                            <td>65.83</td>
                                        </tr>
                                        <tr id="DataRow3">
                                            <td>10251</td>
                                            <td>VICTE</td>
                                            <td>Leverling</td>
                                            <td>08/08/2012</td>
                                            <td>05/09/2012</td>
                                            <td>15/08/2012</td>
                                            <td>41.34</td>
                                        </tr>
                                        <tr id="DataRow4">
                                            <td>10252</td>
                                            <td>SUPRD</td>
                                            <td>Peacock</td>
                                            <td>09/08/2012</td>
                                            <td>06/09/2012</td>
                                            <td>11/08/2012</td>
                                            <td>51.3</td>
                                        </tr>
                                        <tr id="DataRow5">
                                            <td>10253</td>
                                            <td>HANAR</td>
                                            <td>Leverling</td>
                                            <td>10/08/2012</td>
                                            <td>24/08/2012</td>
                                            <td>16/08/2012</td>
                                            <td>58.17</td>
                                        </tr>
                                        <tr id="DataRow6">
                                            <td>10254</td>
                                            <td>CHOPS</td>
                                            <td>Buchanan</td>
                                            <td>11/08/2012</td>
                                            <td>08/09/2012</td>
                                            <td>23/08/2012</td>
                                            <td>22.98</td>
                                        </tr>
                                        <tr id="DataRow7">
                                            <td>10255</td>
                                            <td>RICSU</td>
                                            <td>Dodsworth</td>
                                            <td>12/08/2012</td>
                                            <td>09/09/2012</td>
                                            <td>15/08/2012</td>
                                            <td>148.33</td>
                                        </tr>
                                        <tr id="DataRow8">
                                            <td>10256</td>
                                            <td>WELLI</td>
                                            <td>Leverling</td>
                                            <td>15/08/2012</td>
                                            <td>12/09/2012</td>
                                            <td>17/08/2012</td>
                                            <td>13.97</td>
                                        </tr>
                                        <tr id="DataRow9">
                                            <td>10257</td>
                                            <td>HILAA</td>
                                            <td>Peacock</td>
                                            <td>16/08/2012</td>
                                            <td>13/09/2012</td>
                                            <td>22/08/2012</td>
                                            <td>81.91</td>
                                        </tr>
                                        <tr id="DataRow10">
                                            <td>10258</td>
                                            <td>ERNSH</td>
                                            <td>Davolio</td>
                                            <td>17/08/2012</td>
                                            <td>14/09/2012</td>
                                            <td>23/08/2012</td>
                                            <td>140.51</td>
                                        </tr>
                                        <tr id="DataRow11">
                                            <td>10259</td>
                                            <td>CENTC</td>
                                            <td>Peacock</td>
                                            <td>18/08/2012</td>
                                            <td>15/09/2012</td>
                                            <td>25/08/2012</td>
                                            <td>3.25</td>
                                        </tr>
                                        <tr id="DataRow12">
                                            <td>10260</td>
                                            <td>OTTIK</td>
                                            <td>Peacock</td>
                                            <td>19/08/2012</td>
                                            <td>16/09/2012</td>
                                            <td>29/08/2012</td>
                                            <td>55.09</td>
                                        </tr>
                                        <tr id="DataRow13">
                                            <td>10261</td>
                                            <td>QUEDE</td>
                                            <td>Peacock</td>
                                            <td>19/08/2012</td>
                                            <td>16/09/2012</td>
                                            <td>30/08/2012</td>
                                            <td>3.05</td>
                                        </tr>
                                        <tr id="DataRow14">
                                            <td>10262</td>
                                            <td>RATTC</td>
                                            <td>Callahan</td>
                                            <td>22/08/2012</td>
                                            <td>19/09/2012</td>
                                            <td>25/08/2012</td>
                                            <td>48.29</td>
                                        </tr>
                                        <tr id="DataRow15">
                                            <td>10263</td>
                                            <td>ERNSH</td>
                                            <td>Dodsworth</td>
                                            <td>23/08/2012</td>
                                            <td>20/09/2012</td>
                                            <td>31/08/2012</td>
                                            <td>146.06</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // DATATABLE - DTC -->
                                
                            </div>
                            <!-- // Widget -->
                             
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row -->
                    
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="opaci35 aweso-icon-table"></i> Column Filter, row total <small>.boo-table bg-blue</small></h3>
                        <p>complete styles DataTable - header, toolbar, caption, column filter, checkbox, total row, table info, Pagination - Variable preparation and options for your application</p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="widget widget-simple widget-table">
                                <table id="exampleDTCF" class="table table-striped table-content table-condensed boo-table table-hover bg-blue-light">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col"><input type="checkbox" class="checkbox check-all" data-tableid="exampleDTCF" value="ON" name="check-all"></th>
                                            <th scope="col">Order ID <span class="column-sorter"></span></th>
                                            <th scope="col">Customer ID <span class="column-sorter"></span></th>
                                            <th scope="col">Order Date <span class="column-sorter"></span></th>
                                            <th scope="col">Shipped Date <span class="column-sorter"></span></th>
                                            <th scope="col">Freight <span class="column-sorter"></span></th>
                                        </tr>
                                        <tr id="filter-row" class="filter">
                                            <th></th>
                                            <th>Order ID</th>
                                            <th>Customer ID</th>
                                            <th class="hidden-phone hidden-tablet">Order Date</th>
                                            <th>Shipped Date</th>
                                            <th>Freight</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr id="FootersRow0" class="total">
                                            <th></th>
                                            <th>Total sum</th>
                                            <th></th>
                                            <th class="hidden-phone hidden-tablet"></th>
                                            <th></th>
                                            <th class="text-right"></th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                            <td>10248</td>
                                            <td>VINET</td>
                                            <td>04/08/2012</td>
                                            <td>16/08/2012</td>
                                            <td>32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td><input type="checkbox" class="checkbox check-row" value="1" name="checkRow"></td>
                                            <td>10249</td>
                                            <td>TOMSP</td>
                                            <td>05/08/2012</td>
                                            <td>10/08/2012</td>
                                            <td>11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td><input type="checkbox" class="checkbox check-row" value="2" name="checkRow"></td>
                                            <td>10250</td>
                                            <td>HANAR</td>
                                            <td>08/08/2012</td>
                                            <td>12/08/2012</td>
                                            <td>65.83</td>
                                        </tr>
                                        <tr id="DataRow3">
                                            <td><input type="checkbox" class="checkbox check-row" value="3" name="checkRow"></td>
                                            <td>10251</td>
                                            <td>VICTE</td>
                                            <td>08/08/2012</td>
                                            <td>15/08/2012</td>
                                            <td>41.34</td>
                                        </tr>
                                        <tr id="DataRow4">
                                            <td><input type="checkbox" class="checkbox check-row" value="4" name="checkRow"></td>
                                            <td>10252</td>
                                            <td>SUPRD</td>
                                            <td>09/08/2012</td>
                                            <td>11/08/2012</td>
                                            <td>51.3</td>
                                        </tr>
                                        <tr id="DataRow5">
                                            <td><input type="checkbox" class="checkbox check-row" value="5" name="checkRow"></td>
                                            <td>10253</td>
                                            <td>HANAR</td>
                                            <td>10/08/2012</td>
                                            <td>16/08/2012</td>
                                            <td>58.17</td>
                                        </tr>
                                        <tr id="DataRow6">
                                            <td><input type="checkbox" class="checkbox check-row" value="6" name="checkRow"></td>
                                            <td>10254</td>
                                            <td>CHOPS</td>
                                            <td>11/08/2012</td>
                                            <td>23/08/2012</td>
                                            <td>22.98</td>
                                        </tr>
                                        <tr id="DataRow7">
                                            <td><input type="checkbox" class="checkbox check-row" value="7" name="checkRow"></td>
                                            <td>10255</td>
                                            <td>RICSU</td>
                                            <td>12/08/2012</td>
                                            <td>15/08/2012</td>
                                            <td>148.33</td>
                                        </tr>
                                        <tr id="DataRow8">
                                            <td><input type="checkbox" class="checkbox check-row" value="8" name="checkRow"></td>
                                            <td>10256</td>
                                            <td>WELLI</td>
                                            <td>15/08/2012</td>
                                            <td>17/08/2012</td>
                                            <td>13.97</td>
                                        </tr>
                                        <tr id="DataRow9">
                                            <td><input type="checkbox" class="checkbox check-row" value="9" name="checkRow"></td>
                                            <td>10257</td>
                                            <td>HILAA</td>
                                            <td>16/08/2012</td>
                                            <td>22/08/2012</td>
                                            <td>81.91</td>
                                        </tr>
                                        <tr id="DataRow10">
                                            <td><input type="checkbox" class="checkbox check-row" value="10" name="checkRow"></td>
                                            <td>10258</td>
                                            <td>ERNSH</td>
                                            <td>17/08/2012</td>
                                            <td>23/08/2012</td>
                                            <td>140.51</td>
                                        </tr>
                                        <tr id="DataRow11">
                                            <td><input type="checkbox" class="checkbox check-row" value="11" name="checkRow"></td>
                                            <td>10259</td>
                                            <td>CENTC</td>
                                            <td>18/08/2012</td>
                                            <td>25/08/2012</td>
                                            <td>3.25</td>
                                        </tr>
                                        <tr id="DataRow12">
                                            <td><input type="checkbox" class="checkbox check-row" value="12" name="checkRow"></td>
                                            <td>10260</td>
                                            <td>OTTIK</td>
                                            <td>19/08/2012</td>
                                            <td>29/08/2012</td>
                                            <td>55.09</td>
                                        </tr>
                                        <tr id="DataRow13">
                                            <td><input type="checkbox" class="checkbox check-row" value="13" name="checkRow"></td>
                                            <td>10261</td>
                                            <td>QUEDE</td>
                                            <td>19/08/2012</td>
                                            <td>30/08/2012</td>
                                            <td>3.05</td>
                                        </tr>
                                        <tr id="DataRow14">
                                            <td><input type="checkbox" class="checkbox check-row" value="14" name="checkRow"></td>
                                            <td>10262</td>
                                            <td>RATTC</td>
                                            <td>22/08/2012</td>
                                            <td>19/09/2012</td>
                                            <td>48.29</td>
                                        </tr>
                                        <tr id="DataRow15">
                                            <td><input type="checkbox" class="checkbox check-row" value="15" name="checkRow"></td>
                                            <td>10263</td>
                                            <td>ERNSH</td>
                                            <td>23/08/2012</td>
                                            <td>20/09/2012</td>
                                            <td>146.06</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // DATATABLE - DTCF --> 
                                
                            </div>
                            <!-- // Widget -->
                             
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row -->
                    
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="opaci35 aweso-icon-table"></i> Example Horizontal scroll <small>2500 items read in dynamically</small></h3>
                        <p>When changing the wrapper (use button change) does not recalculate the length - it's up to you :) The button is only for demonstration style wrapper</p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="widget widget-simple widget-table">
                                <table id="exampleDTSC" class="table table-striped table-content table-condensed boo-table table-hover">
                                    <thead>
                                        <tr id="filter-row-1" class="filter">
                                            <th>ID</th>
                                            <th>First name</th>
                                            <th class="hidden-phone hidden-tablet">Last name</th>
                                            <th>ZIP</th>
                                            <th>Country</th>
                                        </tr>
                                        <tr>
                                            <th scope="col">ID <span class="column-sorter"></span></th>
                                            <th scope="col">First name <span class="column-sorter"></span></th>
                                            <th scope="col">Last name <span class="column-sorter"></span></th>
                                            <th scope="col">ZIP <span class="column-sorter"></span></th>
                                            <th scope="col">Country <span class="column-sorter"></span></th>
                                        </tr>
                                    </thead>
                                </table>
                                <!-- // DATATABLE - DTSC -->
                                
                            </div>
                            <!-- // Widget -->
                             
                        </div>
                        <!-- // Column -->
                        
                    </div>
                    <!-- // Example row -->
                    
                    <p>Click here for change wrapper style <a id="btnChangeWrapper2" class="btn btn-green" href="javascript:void(0);"> <i class="fontello-icon-arrows-cw"></i> Change</a></p>
                </section>
            </div>
            <!-- // page content --> 
            
        </div>
        <!-- // main-content --> 
        
    </div>
    <!-- // main-container  -->
    
    <footer id="footer-fix">
        <div id="footer-sidebar" class="footer-sidebar">
            <div class="navbar">
                <div class="btn-toolbar"> <a class="btn btn-glyph btn-link" href="javascript:void(0);"><i class="fontello-icon-up-open-1"></i></a> </div>
            </div>
        </div>
        <!-- // footer sidebar -->
        
        <div id="footer-content" class="footer-content">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <ul class="nav pull-left">
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnToggleSidebar" class="btn-glyph fontello-icon-resize-full-2 tip hidden-phone" href="javascript:void(0);" title="show hide sidebar"></a></li>
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnChangeSidebar" class="btn-glyph fontello-icon-login tip hidden-phone" href="javascript:void(0);" title="change sidebar position"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnChangeSidebarColor" class="btn-glyph fontello-icon-palette tip" href="javascript:void(0);" title="change sidebar color"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cw" href="javascript:void(0);"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="fontello-icon-home-3" href="dashboard-one.html"></a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-help-2 tip" href="javascript:void(0);" title="help to page"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cog-4 tip" href="javascript:void(0);" title="settings app"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnLogout" class="btn-glyph fontello-icon-logout-1 tip" href="javascript:void(0);" title="logout"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnScrollup" class="scrollup btn-glyph fontello-icon-up-open-1" href="javascript:void(0);"><span class="hidden-phone">Scroll</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- // footer content --> 
        
    </footer>
    <!-- // footer-fix  --> 
    
</div>
<!-- // page-container  --> 

<!-- hide inject elements-->
<div class="hide"> 
    <!-- inject to DTB Table -->
    <div class="DTB_toolBar">
        <ul class="btn-toolbar pull-right">
            <li><a class="btn btn-glyph"><i class="fugue-table"></i></a></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-pencil"></i> Table</a></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-plus"></i></a></li>
            <li class="divider-vertical"></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-export"></i></a></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-excel"></i></a></li>
            <li class="divider-vertical"></li>
        </ul>
    </div>
    <!-- // inject -->
    
    <div class="DTB_resetTable">
        <ul class="btn-toolbar pull-right">
            <li class="divider-vertical"></li>
            <li><a href="javascript:void(0)" class="btn"><i class="fugue-arrow-circle"></i></a></li>
        </ul>
    </div>
    <!-- // inject -->
    
    <!-- inject to DTC Table -->
    <div class="DTC_resetTable">
        <ul class="btn-toolbar pull-right">
            <li class="divider-vertical"></li>
            <li><a href="javascript:void(0)" class="btn btn-grey"><i class="fugue-arrow-circle"></i></a></li>
        </ul>
    </div>
    <div id="DTC_toolBar">
        <ul class="btn-toolbar pull-left">
            <li><a class="btn btn-glyph"><i class="fugue-table"></i></a></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-pencil"></i></a></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-plus"></i></a></li>
            <li class="divider-vertical"></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-export"></i></a></li>
            <li><a class="btn btn-glyph"><i class="fugue-table-excel"></i></a></li>
        </ul>
        <div class="btn-toolbar pull-right margin-00"> <a href="javascript:void(0)" class="btn btn-green ">NEW Contact</a> </div>
    </div>
    <div id="DTC_actionTable">
        <div class="btn-toolbar">
            <div class="action-select-wraper">
                <select name="actionTable" id="actionTable" class="selectpicker">
                    <option value="">Select action...</option>
                    <option value="validate">Validate</option>
                    <option value="delete">Export</option>
                    <option value="archiv">Archiv</option>
                </select>
                <button type="submit" class="btn btn-blue">Action</button>
            </div>
        </div>
    </div>
    <!-- // inject -->
    
    <!-- inject to DTCF Table -->
    <div id="DTCF_toolBar">
        <ul class="btn-toolbar pull-right">
            <li>
                <button class="btn check-all" data-tableid="exampleDTCF">Check All</button>
            </li>
            <li>
                <button class="btn check-view" data-tableid="exampleDTCF">Check View</button>
            </li>
            <li>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="fontello-icon-down-open"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#"><i class="fugue-table-import"></i><span class="divider-text"></span> Import Data</a></li>
                        <li><a href="#"><i class="fugue-table-export"></i><span class="divider-text"></span> Export Data</a></li>
                        <li><a href="#"><i class="fugue-table-excel"></i><span class="divider-text"></span> Export to Excel</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fugue-table-plus"></i><span class="divider-text"></span> Add New</a></li>
                        <li><a href="#"><i class="fugue-table-share"></i><span class="divider-text"></span> Share Table</a></li>
                    </ul>
                </div>
            </li>
            <li class="divider-vertical"></li>
            <li><a href="javascript:void(0)" class="btn btn-green ">NEW Order</a></li>
            <li class="divider-vertical"></li>
            <li><a href="javascript:void(0)" class="btn"><i class="fugue-arrow-circle"></i></a></li>
        </ul>
    </div>
    <div id="DTCF_actionTable">
        <div class="btn-toolbar pull-left">
            <div class="action-select-wraper"> <span class="arrow-table-action"></span>
                <select name="actionTableDTCF" id="actionTableDTCF" class="selectpicker">
                    <option value="">Action for selected...</option>
                    <option value="validate">Validate</option>
                    <option value="delete">Delete</option>
                </select>
                <button type="submit" class="btn">Perform the action</button>
            </div>
        </div>
    </div>
    <!-- // inject -->
    
    <!-- inject to DTCV Table -->
    <div id="DTSC_header_title">
        <h4>2500 Entries</h4>
    </div>
</div>

<!-- Le javascript --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script> 
<script src="assets/js/lib/jquery.js"></script> 
<script src="assets/js/lib/jquery-ui.js"></script>
<script src="assets/js/lib/bootstrap.js"></script> 
<script src="assets/js/lib/jquery.cookie.js"></script> 

<!-- Plugins Bootstrap --> 
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> 
<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/date.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script> 
<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> 
<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script> 
<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script> 
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script> 
<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script>
<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script> 
<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard.js"></script> 
<script src="assets/plugins/bootstrap-toggle-buttons/js/bootstrap-toggle-buttons.js"></script> 

<!-- Plugins Custom --> 
<script src="assets/plugins/google-code-prettify/prettify.js"></script> 
<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script> 
<script src="assets/plugins/qtip2/dist/jquery.qtip.min.js"></script> 
<script src="assets/plugins/list/js/list.min.js"></script> 
<script src="assets/plugins/list/plugins/list.paging.min.js"></script> 
<script src="assets/plugins/fullcalendar/fullcalendar.js"></script> 

<!-- Plugins Forms --> 
<script src="assets/plugins/uniform/jquery.uniform.js"></script> 
<script src="assets/plugins/select2/select2.min.js"></script> 
<script src="assets/plugins/counter/jquery.counter.js"></script> 
<script src="assets/plugins/elastic/jquery.elastic.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.extensions.js"></script> 
<script src="assets/plugins/validate/js/jquery.validate.min.js"></script> 
<script src="assets/plugins/xbreadcrumbs/xbreadcrumbs.js"></script> 

<!-- Charts --> 
<script src="assets/plugins/sparkline/jquery.sparkline.js"></script> 
<script src="assets/plugins/flot/jquery.flot.js"></script> 
<script src="assets/plugins/flot/jquery.flot.categories.js"></script> 
<script src="assets/plugins/flot/jquery.flot.grow.js"></script> 
<script src="assets/plugins/flot/jquery.flot.orderBars.js"></script> 
<script src="assets/plugins/flot/jquery.flot.pie.js"></script> 
<script src="assets/plugins/flot/jquery.flot.resize.js"></script> 
<script src="assets/plugins/flot/jquery.flot.selection.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stack.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stackpercent.js"></script> 
<script src="assets/plugins/flot/jquery.flot.time.js"></script> 

<!-- Plugins Tables --> 
<script src="assets/plugins/datatables/media/js/jquery.dataTables.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.plugins.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.columnFilter.js"></script> 

<!-- main js -->
<script src="assets/js/application.js"></script>  

<!-- Only This Demo Page --> 
<script src="assets/js/demo/demo-jquery.dataTables.js"></script>

</body>
</html>
